<script setup>
import { useCounterStore } from '@/stores/category'
import { ref } from 'vue'
import CartCar from '@/components/CartCar/index.vue'
import { useCategory } from '@/views/Category/composables/useCategory.vue'

const categoryStore = useCounterStore()
// const { categoryData } = useCategory()

// console.log(navLists)
// const navList = ref([])
// navList.value = navLists
const handleLayerClick = () => {
  window.location.reload()
}
</script>

<template>
  <header class="app-header">
    <div class="container">
      <h1 class="logo">
        <RouterLink to="/">小兔鲜</RouterLink>
      </h1>
      <ul class="app-header-nav">
        <li class="item">
          <RouterLink class="link" to="/">首页</RouterLink>
        </li>
        <li class="item" v-for="item in categoryStore.navLists" :key="item.id">
          <RouterLink
            class="link"
            :to="`/category/${item.id}`"
            :key="item.id"
            active-class="active"
            >{{ item.name }}</RouterLink
          >
          <!-- 弹出层 -->
          <div class="layer" active @click="handleLayerClick">
            <ul>
              <li v-for="ele in item.children" :key="ele.id">
                <RouterLink :to="`/category/sub/${ele.id}`">
                  <img :src="ele.picture" />
                  <p>{{ ele.name }}</p>
                </RouterLink>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜一搜" />
      </div>
      <!-- 头部购物车 -->
      <CartCar />
    </div>
  </header>
</template>

<style scoped lang="scss">
.app-header {
  background: #fff;
  position: relative;
  .container {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 200px;

    a {
      display: block;
      height: 132px;
      width: 100%;
      text-indent: -9999px;
      background: url('@/assets/images/logo.jpg') no-repeat center 19px /
        contain;
    }
  }

  .app-header-nav {
    // float: left;
    // width: 820px;
    // display: flex;
    // padding-left: 40px;
    position: relative;
    z-index: 998;
    clear: both;

    .item {
      font-weight: bold;
      margin-right: 40px;
      width: 38px;
      text-align: center;
      float: left;

      height: 40px;
      line-height: 40px;
      // .router-link-exact-active {
      //   color: $xtxColor;
      //   border-bottom: 1px solid $xtxColor;
      // }

      .link {
        font-size: 16px;
        padding-bottom: 7px;
        // line-height: 32px;
        // height: 32px;
        // display: inline-block;
      }
      &:hover {
        .link {
          color: $xtxColor;
          border-bottom: 1px solid $xtxColor;
        }
        .layer {
          opacity: 1;
          height: 120px;
        }
        .active {
          opacity: 1;
          // color: $xtxColor;
          // border-bottom: 1px solid $xtxColor;
        }
      }
    }
    .layer {
      // margin-top: 20px;
      // background-color: #fff;
      // margin-bottom: 30px;
      position: absolute;
      padding-top: 10px;
      left: 0;
      top: 40px;
      opacity: 0;
      width: 800px;
      height: 0;
      background-color: #fff;

      box-shadow: 0 0 5px #ccc;
      // padding: 10px;
      overflow: hidden;
      transition: all 0.5s;

      ul {
        display: flex;

        // padding: 0 32px;
        flex-wrap: wrap;

        li {
          // width: 168px;
          height: 100px;
          width: 100px;
          text-align: center;

          a {
            border-bottom: 0;

            img {
              width: 60px;
              height: 60px;
              text-align: center;
            }

            p {
              line-height: 40px;
            }

            &:hover {
              color: $xtxColor;
            }
          }
        }
      }
    }
  }

  .search {
    width: 170px;
    height: 32px;
    position: relative;
    border-bottom: 1px solid #e7e7e7;
    line-height: 32px;

    .icon-search {
      font-size: 18px;
      margin-left: 5px;
    }

    input {
      width: 140px;
      padding-left: 5px;
      color: #666;
    }
  }

  .cart {
    width: 50px;

    .curr {
      height: 32px;
      line-height: 32px;
      text-align: center;
      position: relative;
      display: block;

      .icon-cart {
        font-size: 22px;
      }

      em {
        font-style: normal;
        position: absolute;
        right: 0;
        top: 0;
        padding: 1px 6px;
        line-height: 1;
        background: $helpColor;
        color: #fff;
        font-size: 12px;
        border-radius: 10px;
        font-family: Arial;
      }
    }
  }
}
</style>
